---
title: Link
description: Add links to code snippets
layout: PreviewAndImplementation
---

## !demo

Add links to code snippets.

<Demo name="link">**ipsum** is a link to example.com</Demo>

## !implementation

```tsx code.tsx
import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"

const link: AnnotationHandler = {
  name: "link",
  Inline: ({ annotation, children }) => {
    const { query } = annotation
    return <a href={query}>{children}</a>
  },
}

async function Code({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-dark")
  return <Pre code={info} handlers={[link]} />
}
```

### Autolinking

Instead of manually adding links to code snippets, you can use a regex to automatically link URLs.

<Demo name="autolink" />
